<script setup lang="ts">
import type { CSSProperties } from 'vue'

withDefaults(defineProps<{
  modelValue: boolean,    // 显示隐藏
  title?: string,         // 标题
  modal?: boolean,        // 是否显示遮罩层
  closeOnClickModal?: boolean,  // 点击遮罩层是否关闭对话框
  showClose?: boolean,    // 是否显示关闭按钮
  style?: CSSProperties,  // 自定义样式
  showCancel?: boolean,   // 是否显示取消按钮
  showConfirm?: boolean,  // 是否显示确定按钮
}>(), {
  title: '标题',
  modal: true,
  closeOnClickModal: true,
  showClose: true,
  style: () => ({}),
  showCancel: true,
  showConfirm: true,
})

const emits = defineEmits(['update:modelValue', 'cancel', 'confirm'])

// 关闭dialog
const close = () => {
  emits('update:modelValue', false)
}

// 取消
const cancel = () => {
  emits('cancel')
  close()
}

// 确定
const confirm = () => {
  emits('confirm')
  close()
}
</script>

<template>
  <!-- <teleport to='body'> -->
    <transition name="mask-fade">
      <view class="mask" v-if="modelValue && modal" @click="() => { if (closeOnClickModal) close() }" />
    </transition>

    <transition name="dialog-fade">
      <view class="dialog" v-if="modelValue" :style="style">
        <!-- 头部 -->
        <view class="header">
          <view class="text">
            <slot name="title">{{ title }}</slot>
          </view>
          <view class="close-btn" @click="close" v-if="showClose">
            <image  src="../static/icons/delete-small.png" />
          </view>
        </view>

        <!-- 内容 -->
        <view class="content">
          <slot>内容</slot>
        </view>

        <!-- 底部 -->
        <view class="footer">
          <slot name="footer">
            <view>
              <button @click="cancel" v-if="showCancel">取消</button>
              <button @click="confirm" v-if="showConfirm">确定</button>
            </view>
          </slot>
        </view>
      </view>
    </transition>
  <!-- </teleport> -->
</template>

<style scoped lang="scss">
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 30rpx;
  width: 500rpx;
  height: auto;
  background-color: #fff;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  border-radius: 20rpx;

  .header {
    display: flex;
    justify-content: space-between;

    .text {
      font-size: 36rpx;
      font-weight: bold;
    }

    .close-btn {
      width: 40rpx;
      height: 40rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .content {
    margin: 30rpx 0;
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.mask-fade-enter-active,
.mask-fade-leave-active,
.dialog-fade-enter-active,
.dialog-fade-leave-active {
  transition: all 0.3s ease;
}

.dialog-fade-enter-from {
  transform: translate(-50%, -70%);
  opacity: 0;
}

.dialog-fade-enter-to {
  opacity: 1;
}

.dialog-fade-leave-from {
  opacity: 1;
}

.dialog-fade-leave-to {
  transform: translate(-50%, -70%);
  opacity: 0;
}

.mask-fade-enter-from {
  opacity: 0;
}

.mask-fade-enter-to {
  opacity: 1;
}

.mask-fade-leave-from {
  opacity: 1;
}

.mask-fade-leave-to { 
  opacity: 0;
}
</style>
